<template>
    <div class="com-container">
        <!-- 折线图 -->
        <div ref="chartDom" class="com-chart" id="chartDom"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'LineChart',
})
// 折线图
export default class LineChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            grid: {
                x: '5%', // x 偏移量
                y: '5%', // y 偏移量
                width: '95%', // 宽度
                height: '65%', // 高度
                left: '2%',
                right: '2%',
                top: 30,
                bottom: 10,
                containLabel: true,
                color: 'red',
            },
            tooltip: {
                trigger: 'axis',
                // formatter: param => {
                //     const marker = `<span style="display:inline-block;margin-bottom:4px;margin-right:5px;width:10px;height:3px;background-color:${param.color}"></span>`;
                //     return marker + param.seriesName + '&nbsp' + thousandsFormat(param.value);
                // },
                axisPointer: {
                    z: 1,
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                        type: 'dotted',
                    },
                },
                confine: true,
                position: 'inside',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },
            legend: {
                orient: 'horizontal',
                icon: 'circle',
                left: 'left',
                top: 0,
                itemHeight: 10, // 修改icon图形大小
                itemWidth: 8,
                itemGap: 10,
                padding: [5, 15],
                data: [
                    { name: '警告', icon: 'circle' },
                    { name: '送审', icon: 'circle' },
                    { name: '禁止', icon: 'circle' },
                ],
                textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                selectedMode: false,
            },
            xAxis: {
                type: 'category',
                data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
                boundaryGap: false,
                // boundaryGap: ['0%', '0%'],
                axisLine: {
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#E9E9E9',
                        width: 1,
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: 'rgba(0, 0, 0, 0.65)',
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        type: 'solid', // 设置网格线类型 dotted：虚线   solid:实线
                        color: '#E9E9E9',
                    },
                    show: true,
                },
                splitNumber: 4,
            },

            color: ['#5fb2ff', '#fee675', '#f37b8e'],
            series: [
                // { name: '警告', data: [820, 932, 401, 934, 690, 730, 520], type: 'line', smooth: true },
                // { name: '送审', data: [420, 732, 501, 934, 890, 430, 720], type: 'line', smooth: true },
                // { name: '禁止', data: [420, 932, 401, 534, 390, 630, 520], type: 'line', smooth: true },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            xAxis: { data: e.xAxisData },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                    // 条目文字配置
                    // itemStyle: {
                    //   barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
                    // }
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
